<template>
   <div>
      <el-dialog
         title="付款审批"
         v-model="dialogVisible"
         width="965px"
         :close-on-click-modal="false"
      >
         <!-- 付款信息展示区域 -->
         <div class="payment-info">
            <div class="info-row">
               <div class="info-item">
                  <div class="label">付款单号</div>
                  <div class="value">FK240305001</div>
               </div>
               <div class="info-item">
                  <div class="label">订单类型</div>
                  <div class="value">采购单</div>
               </div>
               <div class="info-item">
                  <div class="label">采购单/出库退货单</div>
                  <div class="value">CG240212001</div>
               </div>
               <div class="info-item">
                  <div class="label">采购/出库退货日期</div>
                  <div class="value">2022-06-02</div>
               </div>
               <div class="info-item">
                  <div class="label">供应商/客户</div>
                  <div class="value">供应商一</div>
               </div>
               <div class="info-item">
                  <div class="label">总金额（元）</div>
                  <div class="value">4,000.00</div>
               </div>
               <div class="info-item">
                  <div class="label">待付款金额（元）</div>
                  <div class="value">4,000.00</div>
               </div>
            </div>
         </div>

         <!-- 付款详细信息 -->
         <div class="payment-details">
            <div style="display: flex; align-items: center">
               <div style="height: 15px; background-color: #6860ff; width: 2px; margin-right: 8px"></div>
               <div>
                  <h1>付款信息</h1>
               </div>
            </div>
            <div class="details-content">
               <div class="details-row">
                  <div class="details-item">
                     <span class="label">本次付款金额</span>
                     <div class="value-box">4,000.00</div>
                  </div>
                  <div class="details-item">
                     <span class="label">付款方式</span>
                     <div class="value-box">支付宝</div>
                  </div>
               </div>
               <div class="details-row">
                  <div class="details-item">
                     <span class="label">付款日期</span>
                     <div class="value-box">2022-06-02</div>
                  </div>
                  <div class="details-item">
                     <span class="label">备注</span>
                     <div class="value-box">批次第二</div>
                  </div>
               </div>
            </div>
         </div>

         <!-- 附件区域 -->
         <div class="attachments">
            <div style="display: flex; align-items: center; margin-bottom: 10px">
               <div style="height: 15px; background-color: #6860ff; width: 2px; margin-right: 8px"></div>
               <div>
                  <h1>附件</h1>
               </div>
            </div>
            <div class="attachments-list">
               <div
                  class="attachment-item"
                  v-for="(item, index) in 3"
                  :key="index"
               >
                  <div class="pdf-icon">
                     <img
                        src="@/assets/PDF.png"
                        style="width: 30px; height: 30px"
                     />
                  </div>
                  <div class="attachment-info">
                     <div class="filename">通知（关于第一步加强供应链服务平台）.pdf</div>
                     <p class="filesize">15.4KB</p>
                     <div>
                        <el-button
                           type="primary"
                           link
                           >在线预览</el-button
                        >
                        <el-button
                           type="primary"
                           link
                           >下载</el-button
                        >
                     </div>
                  </div>
               </div>
            </div>
         </div>

         <!-- 审批意见 -->
         <div class="approval-opinion">
            <h3>审批意见</h3>
            <el-input
               type="textarea"
               v-model="approvalOpinion"
               placeholder="请输入审批意见"
               :rows="3"
            />
         </div>

         <!-- 底部按钮 -->
         <template #footer>
            <span class="dialog-footer">
               <el-button @click="dialogVisible = false">取消</el-button>
               <el-button type="danger">审批拒绝</el-button>
               <el-button
                  type="primary"
                  color="#6860FF"
                  >审批通过</el-button
               >
            </span>
         </template>
      </el-dialog>
   </div>
</template>

<script setup>
   import { ref, defineExpose } from "vue";

   const dialogVisible = ref(false);
   const approvalOpinion = ref("");

   defineExpose({
      open: () => {
         dialogVisible.value = true;
      },
   });
</script>

<style scoped lang="scss">
   .payment-info {
      background-color: #f4f5f7;
      padding: 20px;
      border-radius: 5px;
      .info-row {
         display: flex;
         justify-content: space-around;
         .info-item {
            //    display: flex;
            .value {
               color: #333;
               font-weight: 500;
            }
         }
      }
   }

   .payment-details {
      margin-top: 10px;
   }
   .attachments,
   .approval-opinion {
      margin-bottom: 20px;
      h3 {
         font-size: 16px;
         margin-bottom: 15px;
         font-weight: 500;
      }
   }

   .details-content {
      .details-row {
         display: flex;
         gap: 20px;
         margin-bottom: 15px;
         .details-item {
            flex: 1;
            .label {
               color: #666;
               margin-bottom: 8px;
               display: block;
            }
            .value-box {
               background-color: #f5f7fa;
               padding: 8px 12px;
               border-radius: 4px;
            }
         }
      }
   }

   .attachments-list {
      display: flex;
      justify-content: space-around;
      gap: 10px;
      .attachment-item {
         display: flex;
         align-items: flex-start;
         padding: 12px;
         border: 1px solid #eee;
         border-radius: 4px;
         margin-bottom: 10px;
         .pdf-icon {
            margin-right: 10px;
            color: #ff4d4f;
         }

         .attachment-info {
            .filename {
               display: flex;
               flex-wrap: nowrap;
               color: #333;
               font-size: 12px;
            }
            .filesize {
               margin: 0;
               color: #999;
               font-size: 12px;
            }
         }
      }
   }

   .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
   }
</style>
